<!DOCTYPE html>
<!--html&css入门-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .outerDiv{
            width: 800px;
            height: 300px;
            border: 1px solid blue;
            background-color: aliceblue;
            margin: 0px auto;
        }
        .innerDiv{
            width: 100px;
            height: 100px;
            float: left;
            margin: 10px 20px 30px 40px;
        }
        .d1{
            background-color: greenyellow;
            padding: 10px 20px 30px 40px;
        }

    </style>
</head>
<body>
    <h1>标题</h1>
    <h2>标题</h2>
    <h3>标题</h3>
    <h4>标题</h4>
    <h5>标题</h5>
    
    <p>段落标签1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
    </p>
    <p>段落标签2222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222
    </p>
    换行标识符1
    <br>
    1111111111111
    <hr>
    22222222222222
    <br>
    <h3>有序标签</h3>
    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ol>
    <h3>无序标签</h3>
    <ul>
        <li>2</li>
        <li>2</li>
        <li>2</li>
    </ul>
    <h3>超链接</h3>
    <!-- target用于定义打开的方式 _blank在新窗口中打开 _self在当前窗口打开-->
    <a href="2.html">相对路径打开</a><br>
    <a href="/2.html" target="_self">绝对路径打开 当前窗口</a><br>
    <a href="https://www.baidu.com/" target="_blank">外部资源 新窗口</a> <br>
    <!--多媒体标签-->
    <h3>多媒体标签</h3>
    <!--src 用于定义图片的连接 title 鼠标悬停时显示的文字 alt 加载失败时显示的文字-->
    <img src="data/111.jpg" title="桌面图片" alt="尚硅谷logo"/>
    <!--sec 定义目标声音资源 autoplay 用于控制打开页面时是否自动播放 
        controls 用于控制是否展示控制面板  loop 用于控制是否进行循环播放-->
    <audio src="data/111.mp3" controls="controls" loop="loop">
        音频
    </audio>
    <!--src 用于定义目标视频资源  autoplay 用于控制打开页面时是否自动播放
        controls 用于控制面板是否展示控制面板 loop 用于控制是否进行循环播放-->
    <video src="data/111.mp4"  controls="controls" loop="loop"  width="400px" height="400px">
        视频
    </video>

    <!--表格标签-->
    <!--
        table 表格
        thead 表头，可不写
        tbody 表体，可不写
        tfoot 表尾，可不写
        tr 一行
        td 行内的一格
        th 自带加粗和居中效果的td
    -->
    <h3 style="text-align: center;">员工技能竞赛评分表</h3>
    <table border="1px" style="width: 400px; margin: 0px auto;">
        <tr>
            <th>排名</th>
            <th>姓名</th>
            <th>分数</th>
        </tr>
        <tr>
            <td>1</td>
            <td>张小明</td>
            <td>100</td>
        </tr>
        <tr>
            <td>2</td>
            <td>李小东</td>
            <td>99</td>
        </tr>
        <tr>
            <td>3</td>
            <td>王小虎</td>
            <td>98</td>
        </tr>
    </table>
    <!--通过td的rowspan属性实现上下跨行-->
    <table border="1px" style="width: 400px; margin: 0px auto;">
        <tr>
            <th>排名</th>
            <th>姓名</th>
            <th>分数</th>
            <th>备注</th>
        </tr>
        <tr>
            <td>1</td>
            <td>张小明</td>
            <td>100</td>
            <td rowspan="3">
                前三名升职加薪
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td>李小东</td>
            <td>99</td>
        </tr>
        <tr>
            <td>3</td>
            <td>王小虎</td>
            <td>98</td>
        </tr>
    </table>

    <!--通过td的colspan属性实现左右跨行-->
    <table border="1px" style="width: 400px; margin: 0px auto;">
        <tr>
            <th>排名</th>
            <th>姓名</th>
            <th>分数</th>
            <th>备注</th>
        </tr>
        <tr>
            <td>1</td>
            <td>张小明</td>
            <td>100</td>
            <td rowspan="4">
                前三名升职加薪
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td>李小东</td>
            <td>99</td>
        </tr>
        <tr>
            <td>3</td>
            <td>王小虎</td>
            <td>98</td>
        </tr>
        <tr>
            <td>总人数</td>
            <td colspan="2">3</td>
        </tr>
    </table>

    <!--表单标签重点-->
    <!--
        form标签: 表单标签，其内部用于定义可以让用户输入信息的表单项标签
            action:form标签的属性之一,用于定义信息提交的服务器地址
            method:form标签的属性之一，用于定义信息的提交方式
                get方式，数据后缀到url之后
                post方式，数据会通过请求体发送
        input标签：主要的表单项标签，可以用于定义表单项
            name:input标签的属性之一，用于定义提交的参数名
            type:inout标签的属性之一，用以定义表单项类型
                text 文本框
                password 密码框
                submit 提交按钮
                reset 重置按钮
    -->
    <form action="http://www.baidu.com" method="get">
        用户名 <input type="text" name="username"/> <br>
        密&nbsp;&nbsp;&nbsp;码 <input type="password" name="password" /> <br>
        <input type="submit" value="登录"/>
        <input type="reset" value="重置" />
    </form>

    <!--常见表单项标签-->
    <!--单行文本框-->
    <div>
        个性签名:<input type="text" name="signal" /> <br>
        密码: <input type="password" name="secret"/> <br>
        性别: <input type="radio" name="sex" value="spring" />男
              <input type="radio" name="sex" value="summer" checked="checked" />女
              <br>
        你喜欢的球队是：
              <input type="checkbox" name="team" value="Brazil" /> 巴西
              <input type="checkbox" name="team" value="Chinese" checked /> 中国
              <input type="checkbox" name="team" value="German"/> 德国
              <input type="checkbox" name="team" value="France"/> 法国
              <br>
        你喜欢的运动是：
              <select name="interesting">
                    <option value="swimming">游泳</option>
                    <option value="running">跑步</option>
                    <option value="shooting" selected="selected">射击</option>
                    <option value="skating">溜冰</option>
              </select>
              <br>
        按钮:
              <button type="button">普通按钮:点击无效果,需要通过JavaScript绑定单击响应函数</button>或
              <input type="button" value="普通按钮"/>
              <br>
              <button type="reset">重置按钮:点击后将表单内的所有表单项都恢复为默认值</button>或
              <input type="reset" value="重置按钮"/>
              <br>
              <button type="submit">提交按钮:点击后提交表单</button>或
              <input type="submit" value="提交按钮"/>
              <br>
        隐藏域：
              <input type="hidden" name="userID" value="2233" />
              <br>
        自我介绍：
              <textarea name="desc">这里写默认值</textarea>
              <br>
        上传文件:
              <input type="file" name="file"/>
              <br>
    </div>

    <!--布局相关标签-->
    <!--
        div标签：块，主要用于划分页面结构，做页面布局
        span标签：层，主要用于划分元素范围，配合css做页面元素样式的修饰
    -->
    <div style="width: 500px; height: 400px; background-color: cadetblue;">
        <div style="width: 400px; height: 100px; background-color: beige; margin: 10px auto;">
            <span style="color: blueviolet;">页面开头部分</span>
        </div>
        <div style="width: 400px; height: 100px; background-color: blanchedalmond; margin: 10px auto;">
            <span style="color: blueviolet;">页面中间部分</span>
        </div>
        <div style="width: 400px; height: 100px; background-color: burlywood; margin: 10px auto;">
            <span style="color: blueviolet;">页面中间部分</span>
        </div>
    </div>

    <!--CSS的使用-->
    <div class="outerDiv">
        <div class="innerDiv d1">测试</div>
    </div>
</body>
</html>